<template>
    <view class="card" @click.stop="goPage">
        <!-- Header Start -->
        <view class="card--header flex justify-between">
            <view class="order-sn">订单编号：{{ orderInfo.sn }}</view>
            <view class="status" v-if="orderInfo.orderStatus == 1">待付款</view>
            <view class="status" v-if="orderInfo.orderStatus == 2">已完成</view>
            <view class="status" v-if="orderInfo.orderStatus == 3">已关闭</view>
        </view>
        <!-- Header End -->

        <!-- Main Start -->
        <view class="card--main flex">
            <u-image
                :src="orderInfo.courseCover"
                width="250"
                height="160"
                borderRadius="10"
            ></u-image>
            <view class="ml-[20rpx] order-text">
                <view class="order-text--name line-2 text_hidden">{{ orderInfo.courseName }}</view>
                <view class="mt-[19rpx]">
                    <price
                        :content="orderInfo.orderAmount"
                        mainSize="36rpx"
                        minorSize="34rpx"
                        fontWeight="500"
                    ></price>
                </view>
            </view>
        </view>
        <!-- Main End -->

        <!-- Footer Start -->
        <view class="card--footer flex justify-between items-center">
            <!-- Left Tips -->
            <view class="primary">
                <template v-if="orderInfo.orderStatus == 1">
                    <view class="flex items-center" v-if="timeStamp >= 0">
                        <u-count-down
                            :timestamp="timeStamp"
                            format="mm:ss"
                            :separator-size="26"
                            @end="cutDownOver"
                            color="#2073F4"
                            class="text-primary font-normal text-sm"
                        />
                        <text class="ml-[10rpx] primaryColor">后自动取消</text>
                    </view>
                </template>
            </view>
            <!-- Right Button -->
            <view>
                <slot></slot>
            </view>
        </view>
        <!-- Footer End -->
    </view>
</template>

<script lang="ts" setup>
import { ref, reactive, watchEffect } from 'vue'
import Price from '@/components/price/index.vue'
import { over } from 'lodash'

/** Props Start **/
const emits = defineEmits(['Over'])
const props = withDefaults(
    defineProps<{
        orderInfo?: any
    }>(),
    {
        orderInfo: {}
    }
)
/** Props End **/

/** Data Start **/
const timeStamp = ref<number>(0)
/** Data End **/

const getCountDownSegment = watchEffect(() => {
    // 获取倒计时段
    const endTimestamp = Number(props.orderInfo.orderExpireTime)
    const startTimestamp = new Date().getTime()
    timeStamp.value = endTimestamp - startTimestamp
})

const cutDownOver = () => {
    timeStamp.value = 0
    emits('Over')
}

/** Methods Start **/
const goPage = () => {
    uni.navigateTo({
        url: `/bundle/pages/order_detail/index?id=${props.orderInfo.id}`
    })
}
/** Methods End **/
</script>

<style lang="scss" scoped>
.card {
    border-radius: 14rpx;
    background-color: #ffffff;
    margin: 20rpx 20rpx 0 20rpx;

    &--header {
        padding: 24rpx 30rpx;
        font-size: $font-size-sm;
        border-bottom: 1px solid $color-border-light;
        .order-sn {
            color: $color-text-deep;
        }
        .status {
            color: $color-primary;
        }
    }

    &--main {
        padding: 30rpx;
        color: #555555;
        font-size: $font-size-sm;

        .order-text {
            &--name {
                width: 400rpx;
                font-weight: 500;
                color: $color-text-deep;
            }
        }
    }

    &--footer {
        padding: 20rpx 30rpx;
        font-size: $font-size-sm;
        border-top: 1px solid $color-border-light;
    }
}
.primaryColor {
    color: #2073f4;
}
</style>
